import React, { useState } from 'react'
import './index.css'
import { useParams, useNavigate } from 'react-router-dom'
import { GetUserInfoRouter,IsFriendRouter,AddFriendRouter,RemoveFriendRouter } from '../../api'
import { Avatar, Button,Row,Col} from 'antd'
import { LeftOutlined} from '@ant-design/icons';
import axios from 'axios';
export default function UserInfo() {   
  const params = useParams();
  const navigate = useNavigate();
  const [userInfo,setUserInfo]=useState(undefined)
  const [infoSet,setInfoSet]=useState(false)
  const [isFriend,setIsFriend]=useState(false)
  React.useEffect(()=>{
    if(!localStorage.getItem('login-user')){
      navigate(`/login`)
    }
  },[])
  React.useEffect( ()=>{ 
    if(params.acc==='set'){
      setInfoSet(true)
      axios.get(`${GetUserInfoRouter}/${localStorage.getItem('login-user')}`).then(
        (res)=>{
          if(res.data.message==='查找失败')
          {
            navigate('/home')
          }
          else{
            setUserInfo(res.data.data)
          }
        }
      )
    }
    else{
      axios.get(`${GetUserInfoRouter}/${params.acc}`).then(
        (res)=>{
          if(res.data.message==='查找失败')
          {
            navigate('/home')
          }
          else{
            setUserInfo(res.data.data)
          }
        }
      )
    
      
    }

    axios({
      url:IsFriendRouter,
      method:'get',
      params:{
        u_acc:localStorage.getItem('login-user'),
        f_acc:params.acc
      }
    }).then((res)=>{
      setIsFriend(res.data.isFriend)
    })
   
  },[])

  const back=()=>{
    navigate(-1)
  }
  const toSetInfo=()=>{
    navigate("/setinfo")
  }
  const addFriend= ()=>{
    axios({
      url:AddFriendRouter,
      method:'post',
      data:{u_acc:localStorage.getItem('login-user'),f_acc:params.acc}
    })
    navigate("/home")
  }
  const removeFriend=()=>{
     axios({
      url:RemoveFriendRouter,
      method:'post',
      data:{u_acc:localStorage.getItem('login-user'),f_acc:params.acc}
    })

    navigate("/home")
   
  }
  return (
    <div  className='mainContainer'>
      <div className="header">
      <Row align='middle' style={{height:"50px"}}>
        <Col span={8}><Button style={{color:'#fff',border:'none'}} onClick={back} type='ghost' shape='circle' icon={<LeftOutlined />}></Button>
        </Col>
      </Row>
      </div>
       {userInfo?
       <>
       <div className='userinfo'>
        <div className="info_base">
        <div >
           <Avatar  size={80} src={`http://www.ayaka002.top/assets/avatar/${userInfo.avatar}.png`}/>
        </div>
        <div> 
          <span className='username'>{userInfo.name}</span>
          <span><b>Account:</b>{userInfo.account}</span>
        </div>
       </div>
       <div className="info_list">
        <li>{userInfo.gender}
        </li>
        <li >{userInfo.descr}</li>
        
       </div>
       </div>{infoSet?
       <div className="ops">
        <Button type='primary' block onClick={toSetInfo}>
          编辑资料
        </Button>
       </div>
       :<div className='ops'>
        {isFriend?<Button onClick={removeFriend} block type='danger'>删除好友</Button>:
        <Button block onClick={addFriend} type='primary'>添加好友</Button>}        
       </div>}
       </>
       :<h2>未找到用户</h2>}

    </div>
  )
}
